<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        .item {
            width: 200px;
            height: 600px;
            background-color: skyblue;
        }

        .item:nth-child(even) {
            background-color: pink;
        }

        .nav {
            position: fixed;
            right: 20px;
            top: 50%;
        }

        a {
            display: block;
            margin: 10px;
            color: #333;
        }

        a.active {
            color: rgb(255, 3, 3);
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div class="itms">
        <div class="item" id="item1">1</div>
        <div class="item" id="item2">2</div>
        <div class="item" id="item3">3</div>
        <div class="item" id="item4">4</div>
        <div class="item" id="item5">5</div>
    </div>
    <div class="nav">
        <a href="#item1" class="btn">==1==</a>
        <a href="#item2" class="btn">==2==</a>
        <a href="#item3" class="btn">==3==</a>
        <a href="#item4" class="btn">==4==</a>
        <a href="#item5" class="btn">==5==</a>
    </div>
</body>
<script>
    let el = document.querySelector('#item2');
    let itms = document.querySelector('.itms');
    let nav = document.querySelector('.nav');
    window.addEventListener('scroll', () => {
        let curIdx = isVisable()
        Array.from(nav.children).forEach((item) => {
            item.classList.remove('active');
        })
        nav.children[curIdx].classList.add('active');
        //判断滚动条是否到底
        if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        nav.children[nav.children.length-2].classList.remove('active');
        nav.children[nav.children.length-1].classList.add('active');
        }
    })

    function isVisable() {
        let idx = undefined;
        Array.from(itms.children).forEach((item, index) => {
            let rect = item.getBoundingClientRect();
            if (rect.top <= 0 && rect.bottom >= 0) {
                idx = index;
            }
        })
        return idx;
    }
</script>

</html>